<template>
	<div class="home-wrapper">
		<div class="top-container">
			<el-row style="margin-top: 10px">
				<el-col :span="24">
					<div class="top-nav">
						<a>学院首页</a>
						<a> | </a>
						<a>学院首页</a>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<img src="../assets/logo_1.png" class="logo1" />
					<img src="../assets/black_xd_line.png" class="line" />
				</el-col>
				<el-col :span="6" style="margin-left: -30px">
					<img src="../assets/black_xd_logo.png" class="logo2" />
				</el-col>
			</el-row>
		</div>
		<el-row class="nav-container">
			<el-col :span="24" class="nav">
				<ul class="nav-list">
					<li
						v-for="(parentItem, parentIndex) in navList"
						:key="parentIndex"
						class="item"
						:class="{ 'active-item': activeNavIndex == parentIndex }"
					>
						<a
							>{{ parentItem.name }}
							<div class="drop-container">
								<span v-for="(childItem, childIndex) in parentItem.children" :key="childIndex">
									{{ childItem.name }}
								</span>
							</div>
						</a>
						<span class="jiange">|</span>
					</li>
				</ul>
			</el-col>
		</el-row>
		<el-row class="content">
			<el-col :span="24" style="padding: 0">
				<img src="../assets/background_4.png" class="bg4" />
			</el-col>
			<el-row class="main">
				<el-col :span="6" class="left">
					<div class="left-main">
						<p class="title">{{ navList[activeNavIndex].name }}</p>
						<ul class="left-nav">
							<li
								v-for="(leftNavItem, leftNavIndex) in leftNavList"
								:key="leftNavIndex"
								class="left-nav-item"
								:class="{ 'active-left-nav': activeLeftNavIndex == leftNavIndex }"
							>
								<a>{{ leftNavItem.name }} </a>
								<img src="../assets/quit.png" class="right-arrow" />
							</li>
						</ul>
					</div>
				</el-col>
				<el-col :span="18" class="right">
					<div class="right-title-container">
						<div class="right-title-box">
							<div class="shuxian"></div>
							<h3>{{ leftNavList[activeLeftNavIndex].name }}</h3>
						</div>
						<div class="hengxian"></div>
					</div>
          <slot></slot>
				</el-col>
			</el-row>
		</el-row>
	</div>
</template>

<script>
export default {
	name: "MainWrapper",
	components: {  },
	data() {
		return {
			navList: [
				{ name: "网站首页", link: "", children: [] },
				{
					name: "学院概况",
					link: "",
					children: [
						{ name: "学院简介", link: "", children: [] },
						{ name: "机构设置", link: "", children: [] },
						{ name: "学院概况", link: "", children: [] },
					],
				},
				{ name: "人才培养", link: "", children: [] },
				{ name: "师资队伍", link: "", children: [] },
				{ name: "科学研究", link: "", children: [] },
				{ name: "党的建设", link: "", children: [] },
				{ name: "学生工作", link: "", children: [] },
				{ name: "合作交流", link: "", children: [] },
				{ name: "校友园地", link: "", children: [] },
				{ name: "工程认证", link: "", children: [] },
			],
			activeNavIndex: 9,
			leftNavList: [
				{ name: "问卷调查", link: "", children: [] },
			],
			activeLeftNavIndex: 0,
		};
	},
};
</script>
<style lang="less" scoped>
.home-wrapper {
	height: 130px;
	border-top: 3px solid #273986;
	.top-container {
		margin: 0 auto;
		width: 1200px;
		height: 100%;
		background: url(../assets/top_navigation.png);
		background-position: 75% 0px;
		background-repeat: repeat-y;
		background-size: auto 100%;
		.top-nav {
			display: flex;
			float: right;
			margin-bottom: 10px;
			a {
				padding: 0 5px;
				color: #000;
				font-size: 14px;
				cursor: pointer;
				line-height: 1.42857143;
			}
		}
		.logo1 {
			margin-top: -10px;
		}
		.logo2 {
			margin-top: 5px;
		}
		.line {
			height: 50px;
			padding-left: 20px;
		}
	}
	.nav-container {
		background: #0b60b8;
		.nav {
			display: flex;
			justify-content: center;
			.nav-list {
				display: flex;
				.item {
					white-space: nowrap;
					a {
						color: #fff;
						font-size: 18px;
						font-weight: 500;
						text-align: center;
						padding: 15px 0px;
						display: inline-block;
						width: 110px;
						line-height: 1.4;
						cursor: pointer;
						position: relative;
						.drop-container {
							display: none;
						}
					}
					a:hover {
						background-color: #0c7ed3;
						.drop-container {
							position: absolute;
							width: 100%;
							z-index: 9;
							left: 0;
							top: 55px;
							display: flex;
							flex-direction: column;
							span {
								width: 100%;
								color: #fff;
								font-size: 18px;
								font-weight: 500;
								text-align: center;
								padding: 20px 0px;
								background: #0b60b8;
								&:hover {
									background-color: #0c7ed3;
									cursor: pointer;
								}
							}
						}
					}
					.jiange {
						padding: 0 5px;
						color: #fff;
						font-weight: 500;
						text-align: center;
					}
				}
				.item:last-child {
					.jiange {
						display: none;
					}
				}
				.active-item {
					a {
						font-weight: 600;
					}
				}
			}
		}
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		.bg4 {
			width: 100%;
		}
		.main {
			width: 1200px;
			margin-top: -50px;
			.left {
				height: 1000px;
				padding: 0;
				padding-right: 20px;
				box-sizing: border-box;

				.left-main {
					box-sizing: border-box;
					box-shadow: 1px 1px 5px #9b9b9b;
					width: 100%;
					height: 100%;
					background-image: url(../assets/background_5.png);
					background-size: 100%;
					background-position-y: bottom;
					background-repeat: no-repeat;
				}
				.title {
					color: #fff;
					background-color: #2a3783;
					background-position-y: bottom;
					background-repeat: no-repeat;
					text-align: center;
					height: 100px;
					font-size: 22px;
					padding: 35px;
					box-sizing: border-box;
				}
				.left-nav {
					display: flex;
					flex-direction: column;
					.left-nav-item {
						padding: 21px;
						border-bottom: 1px dashed #dfdfdf;
						text-align: center;
						cursor: pointer;
						a {
							font-size: 18px;
							color: #555;
						}
						.right-arrow {
							float: right;
							margin-top: 2px;
						}
						&:hover {
							background-color: #f5f5f5;
						}
					}
					.active-left-nav {
						a {
							color: #f36008;
							font-weight: 600;
						}
						&:hover {
							background-color: transparent;
						}
					}
				}
			}
			.right {
				margin-top: 100px;
				padding-left: 20px;

				.right-title-container {
					.right-title-box {
						display: flex;
						align-items: center;
						.shuxian {
							width: 5px;
							height: 28px;
							background: #000;
							margin-right: 25px;
						}
						h3 {
							font-size: 24px;
							font-family: inherit;
							font-weight: 500;
							line-height: 1.1;
							color: inherit;
						}
					}

					.hengxian {
						height: 1px;
						width: 100%;
						background: #999999;
						overflow: hidden;
						margin: 20px 0;
					}
				}
			}
		}
	}
}
</style>
